<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:a4j="http://richfaces.org/a4j">

    <h:head>
        <title>.: Supermercado Kwik-E-Mart :.</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/app.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap-theme.min.css" ></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bootstrap.min.css" ></h:outputStylesheet>

    </h:head>

    <h:body class="fondoPagin">

        <div id="wrap" >
            <ui:include src="template/Header.xhtml" />

            <div class="container" style="padding-bottom: 100px;">
                <div class="container">
                    <br/>

                    <h:panelGroup style="text-align: center" rendered="#{listadoProductosBean.idCategoria == listadoProductosBean.TIPO_PRODUCTO_BEBIDAS}">
                        <div style="text-align: center">
                            <h:graphicImage width="90%" height="100%" value="/resources/images/categorias/BEBIDAS.png" />
                        </div>
                    </h:panelGroup>
                    <h:panelGroup style="text-align: center" rendered="#{listadoProductosBean.idCategoria == listadoProductosBean.TIPO_PRODUCTO_CARNE}">
                        <div style="text-align: center">
                            <h:graphicImage width="90%" height="100%" value="/resources/images/categorias/CARNES.png" />
                        </div>
                    </h:panelGroup>
                    <h:panelGroup style="text-align: center" rendered="#{listadoProductosBean.idCategoria == listadoProductosBean.TIPO_PRODUCTO_FRUTA_VERDURA}">
                        <div style="text-align: center;">
                            <h:graphicImage width="90%" height="100%" value="/resources/images/categorias/VERDURAS.png" />
                        </div>
                    </h:panelGroup>
                    <!-- /////////////////////////////////////////////////////////////// -->
                    <h:form>
                        <h:panelGrid columns="1"  >
                            <a4j:outputPanel id="panel"  >
                                <rich:panel style="border: #ffffff"  >
                                    <div class="panel-body" >
                                        <a4j:repeat  value="#{listadoProductosBean.listaProductosCategoria}" var="cap"  id="repeat" >
                                            <h:outputLabel id="resulta2" ></h:outputLabel>
                                            <b:column col-sm="6" col-md="4">
                                                <b:thumbnail> 
                                                    <h:graphicImage width="140" height="140" value="#{cap.urlImagen}" class="img-circle"/>
                                                    <f:facet name="caption" >
                                                        <div style="text-align: center">
                                                            <h3>#{cap.nombreProducto}</h3>
                                                            <p><h3>$ #{cap.costoUnitario}</h3></p>
                                                            <p>
                                                                <h:panelGrid columns="2" style="margin-left: 20%">
                                                                    <p:spinner size="2" min="1" max="6" style="width:75px" value="#{cap.unidadesPedidas}" ></p:spinner>
                                                                    <p><h4> Unidades</h4></p>
                                                                </h:panelGrid>
                                                            </p>
                                                            <p>
                                                                <h:commandButton 
                                                                    style="  border-radius: 45px  12px;
                                                                    font-size: 20px;
                                                                    background-color: #dd0a07;
                                                                    color: #ffffff;
                                                                    box-shadow: inset 0px 0px 100px #dd8e0a;
                                                                    " 
                                                                    disabled="#{sessionBean.clienteSesion.idCliente == null}" actionListener="#{listadoProductosBean.agregarProducto(cap)}" value="Agregar"></h:commandButton>
                                                            </p>
                                                        </div>
                                                    </f:facet>
                                                </b:thumbnail>
                                            </b:column>
                                        </a4j:repeat>
                                    </div>
                                </rich:panel>
                            </a4j:outputPanel>
                            <!--<a4j:outputPanel layout="block" style="text-align: center">
                                <rich:dataScroller for="repeat" render="panel" />
                            </a4j:outputPanel>-->
                        </h:panelGrid>
                    </h:form>
                </div>
            </div>
        </div>
        <div id="footer">
            <ui:include src="template/Footer.xhtml" />
        </div>

    </h:body>
</html>



